<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
          <!--注意，关键字里面的v-model的value值要与getdictionarys函数里面keyword的value值一致，否则数据无法传入-->
					<el-input v-model="filters.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
    <el-table @cell-dblclick="getClick1"  :data="dictionarys" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="100">
      </el-table-column>
      <el-table-column prop="sn"  label="编号" width="150" ></el-table-column>
      <el-table-column prop="name" label="数据字典名" width="200" ></el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!--第一步：定位删除按钮单击事件-->
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination
          layout="total, sizes, prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 30, 50]"
          style="float:right;">
      </el-pagination>
		</el-col>

		<!--编辑界面
		    v-model：在1.X的时候是控制此标签是否展示，但是2.X之后是双向绑定
		-->
    <el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="编号" prop="sn">
          <el-input v-model="editForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据字典" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--抽屉-->
    <el-drawer
        title="数据字典明细"
        :visible.sync="table"
        direction="rtl"
        size="50%">
        <el-table @cell-dblclick="getClick1"  :data="details" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="index" width="100">
          </el-table-column>
          <el-table-column prop="name" label="明细名" width="150" ></el-table-column>
          <el-table-column prop="types_id" label="编号" width="200" ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot="header" slot-scope="scope">
              <el-button size="small" @click="handleEdit1(scope.$index, scope.row)">新增</el-button>
            </template>
            <template scope="scope">
              <el-button size="small" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDel1(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-col :span="24" class="toolbar">
          <el-button type="danger" @click="batchRemove1" :disabled="this.sels.length===0">批量删除</el-button>
          <el-pagination
              layout="total, sizes, prev, pager, next"
              @current-change="handleCurrentChange1"
              :current-page="currentPage"
              :page-size="pageSize"
              :total="total"
              @size-change="handleSizeChange1"
              :page-sizes="[5, 10, 15, 30, 50]"
              style="float:right;">
          </el-pagination>
        </el-col>
      </el-drawer>
        <!--编辑-->
    <el-dialog :title="title1" :visible.sync="editFormVisible1" :close-on-click-modal="false">
      <el-form :model="editForm1" label-width="80px" :rules="editFormRules1" ref="editForm1">
        <el-form-item label="明细名" prop="sn">
          <el-input v-model="editForm1.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-select v-model="editForm1.summarize" value-key="id" placeholder="请选择">
            <!--
              :key：必须指定为你每条数据中的唯一字段
              :label：用户选择之后在下拉框中展示的值
              :value：用户选中值之后要提交时，使用那个字段提交
            -->
            <el-option
                v-for="item in dictionarys"
                :key="item.id"
                :label="item.id"
                :value="item">
              <span style="float: left">{{ item.id }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit1" :loading="editLoading1">提交</el-button>
      </div>
    </el-dialog>


	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getDepartmentListPage, removeDepartment, batchRemoveDepartment, editDepartment, addDepartment } from '../../api/api';

	export default {
		data() {
			return {
        table: false,
        gridData: [],
        // detailsTree:[],
        // // 上级部门的级联集合数据
        // options: [],
				filters: {
          keyword: ''
				},
        details:[],
				dictionarys: [],
				total: 0,
        currentPage: 1,
        pageSize: 5,
				listLoading: false,
				sels: [],//列表选中列
        title:"",
        title1:"",
				editFormVisible: false,//编辑界面是否显示
        editFormVisible1: false,//编辑界面是否显示
				editLoading: false,
        editLoading1: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
        editFormRules1: {
					name: [
						{ required: true, message: '上级id', trigger: 'blur' }
					]
				},

				//编辑界面数据
				editForm: {
          id:null,
          sn:"",
          name:"",
          state:0,
          department:{},
        },

        //编辑界面数据2
				editForm1: {
          id:null,
          name:"",
          types_id:"",
          summarize:{},
          state:0,

        },
        cities: []
      }
				},
		methods: {
      // 获取部门树数据
      // getDetailsTree(){
      //   this.$http.get("/detail/tree")
      //       .then(result=>{
      //         this.options = result.data;
      //       })
      // },

      getClick1(row){
        let para={
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          id:row.id
        }

        console.log("dsa")
        // 根据当前行数据的主键Id，发起请求获取到当前行对应的数据，进行赋值
        this.$http.post("/detail" , para)
            .then(result=>{
              this.details = result.data;
              this.table = true;
            })
      },

      getDepartments(){
        this.$http.get("/dictionary")
            .then(result=>{
              this.cities = result.data;
            })
      },
      // 高级查询函数
      search() {
        // 如果是高级查询，为了避免用户的数据不够展示，我们需要初始化页码为1，不管有没有其他页数据，我们默认展示第一页
        this.currentPage = 1;
        // 页面初始化完成之后，直接调用查询列表数据函数即可
        this.getdictionarys();
      },
      handleCurrentChange(val) {
        // 当用户点击页面的时候，我们需要同步将模型层中的当前页面字段的值改为用户选中的值

        this.currentPage = val;
				this.getdictionarys();
			}, handleCurrentChange1(val) {
        // 当用户点击页面的时候，我们需要同步将模型层中的当前页面字段的值改为用户选中的值

        this.currentPage = val;
				this.getDetails();
			},



      handleSizeChange(val) {
        // 当用户点击页面的时候，我们需要同步将模型层中的当前页面字段的值改为用户选中的值
        this.currentPage = 1;
        this.pageSize = val;
        this.getdictionarys();
      }, handleSizeChange1(val) {
        // 当用户点击页面的时候，我们需要同步将模型层中的当前页面字段的值改为用户选中的值
        this.currentPage = 1;
        this.pageSize = val;
        this.getDetails();
      },

      //获取产品列表
      getDetails() {
        let para = {
          // currentPage与pageSize要与工具条里面的数值对应
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          // 注意，关键字里面的v-model的value值要与getdictionarys函数里面keyword的value值一致，否则数据无法传入
          keyword: this.filters.keyword
        };
        // 开启忙1等
        this.listLoading = true;

        // 开启列表查询
        this.$http.post("/detail",para)
            .then(result =>{
              // 数据请求成之后就关闭忙等
              this.listLoading = false;
              // 1.给列表模型层对象赋值
              this.details=result.data.rows;
              // 2.跟查询对象的条数赋值，注意此处调用的字段与后端PageList的字段一致
              this.total=result.data.total;

            }).catch(result=>{
          this.$message({
            message: '系统繁忙，请重试！',
            type: 'error'
          });
        })
      },






			//获取产品详情列表
			getdictionarys() {
				let para = {
          // currentPage与pageSize要与工具条里面的数值对应
					currentPage: this.currentPage,
					pageSize: this.pageSize,
         // 注意，关键字里面的v-model的value值要与getdictionarys函数里面keyword的value值一致，否则数据无法传入
					keyword: this.filters.keyword
				};
        // 开启忙1等
				this.listLoading = true;

        // 开启列表查询
        this.$http.post("/dictionary",para)
            .then(result =>{
              // 数据请求成之后就关闭忙等
              this.listLoading = false;
              // 1.给列表模型层对象赋值
              this.dictionarys=result.data.rows;
              // 2.跟查询对象的条数赋值，注意此处调用的字段与后端PageList的字段一致
              this.total=result.data.total;

            }).catch(result=>{
          this.$message({
            message: '系统繁忙，请重试！',
            type: 'error'
          });
        })
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
          // 开启忙等框
					this.listLoading = true;
          // 2.发送Axios请求
          // 实现删除前端业务代码
          this.$http.delete("/dictionary/"+row.id)
            .then(result=>{
              this.listLoading = false;

              if (result.data.success){
                // 删除成功
                // 1.给出成功提示
                this.$message({
                  message: result.data.message,
                  type: 'success'
                });
              }else {// 不一定删除成功，我们也不知道删除成功没有
                // 1.给出提示
                this.$message({
                  message: result.data.message,
                  type: 'error'
                });
              // 2.修改页码为第一页
              }
              this.currentPage = 1;
              // 3.调用函数刷新列表
              this.getdictionarys();
            })
              .catch(result=>{ // 接口调用失败
                // 1.关闭忙等框
                this.listLoading = false;
                // 2.给出自定义失败提示！
                this.$message({
                  message: '系统繁忙，请重试！',
                  type: 'error'
                });
              })

				}).catch(() => {
          // 取消进catch
				});
			},


      handleDel1: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
          // 开启忙等框
					this.listLoading = true;
          // 2.发送Axios请求
          // 实现删除前端业务代码
          this.$http.delete("/detail/"+row.id)
            .then(result=>{
              this.listLoading = false;

              if (result.data.success){
                // 删除成功
                // 1.给出成功提示
                this.$message({
                  message: result.data.message,
                  type: 'success'
                });
              }else {// 不一定删除成功，我们也不知道删除成功没有
                // 1.给出提示
                this.$message({
                  message: result.data.message,
                  type: 'error'
                });
              // 2.修改页码为第一页
              }
              this.currentPage = 1;
              // 3.调用函数刷新列表
              this.getDetails();
            })
              .catch(result=>{ // 接口调用失败
                // 1.关闭忙等框
                this.listLoading = false;
                // 2.给出自定义失败提示！
                this.$message({
                  message: '系统繁忙，请重试！',
                  type: 'error'
                });
              })

				}).catch(() => {
          // 取消进catch
				});
			},
      //显示编辑界面
      handleEdit: function (index, row) {
        this.title = "编辑";
        // 1.弹出编辑框
        this.editFormVisible = true;

        // 2.克隆对象到我们模型层的对象中
        this.editForm = Object.assign({}, row);
        // 3.修改parent字段为[2,5,6],用于回显 /2/5
        //3,4是属于无限极树的列表展示
        // 4.将新数组赋值给this.editForm.parent字段
      },
      handleEdit1: function (index, row) {
        this.title1 = "编辑";
        // 1.弹出编辑框
        this.editFormVisible1 = true;

        // 2.克隆对象到我们模型层的对象中
        this.editForm1 = Object.assign({}, row);
        // 3.修改parent字段为[2,5,6],用于回显 /2/5
        //3,4是属于无限极树的列表展示
        // 4.将新数组赋值给this.editForm.parent字段
      },
      //显示新增界面
      handleAdd: function () {
        this.title = "新增";
        this.editFormVisible = true;
        this.editForm = {
          id:null,
          username:"",
          phone:"",
          email:"",
          age:null,
          state:0,
          department:{}
        };
      },




			//编辑
			editSubmit: function () {
        // 主动开启表单校验
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
              // 2.从模型层中的editForm对象中克隆一个新对象
							let para = Object.assign({}, this.editForm);
              // 3.当用户选择了上级部门，那么我们才做数据转换操作
              // 3.当用户选择了上级部门，那么我们才做数据转换操作
              // if (para.d){
              //   // 3.1.获取到用户选择的上级部门数组中的最后一个数据，封装到对象中，赋值给parent字段
              //   para.parent = {id:para.parent[para.parent.length - 1]}
              // }
              // 4.发送Axios请求
              this.$http.put("/dictionary", para)
                  .then(result=>{
                    // 1.关闭按钮忙等
                    this.editLoading = false;
                    // 2.关闭模态框
                    this.editFormVisible = false;
                    if(result.data.success){ // 新增/修改成功
                      this.$message({
                        message: result.data.message,
                        type: 'success'
                      });
                    }else { // 不一定新增/修改成功，我们也不知道新增/修改成功没有
                      this.$message({
                        message: result.data.message,
                        type: 'error'
                      });
                    }
                    // 3.改变当前页页码
                    this.currentPage = 1;
                    // 4.调用查询列表函数
                    this.getdictionarys();
                  })
                  .catch(result=>{
                    this.editLoading = false;
                    this.$message({
                      message: '系统繁忙，请重试！',
                      type: 'error'
                    });
							});
						});
					}
				});
			},


      editSubmit1: function () {
        // 主动开启表单校验
				this.$refs.editForm1.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading1 = true;
							//NProgress.start();
              // 2.从模型层中的editForm对象中克隆一个新对象
							let para = Object.assign({}, this.editForm1);
              // 3.当用户选择了上级部门，那么我们才做数据转换操作
              // 3.当用户选择了上级部门，那么我们才做数据转换操作
              // if (para.d){
              //   // 3.1.获取到用户选择的上级部门数组中的最后一个数据，封装到对象中，赋值给parent字段
              //   para.parent = {id:para.parent[para.parent.length - 1]}
              // }
              // 4.发送Axios请求
              this.$http.put("/detail", para)
                  .then(result=>{
                    // 1.关闭按钮忙等
                    this.editLoading1 = false;
                    // 2.关闭模态框
                    this.editFormVisible1 = false;
                    if(result.data.success){ // 新增/修改成功
                      this.$message({
                        message: result.data.message,
                        type: 'success'
                      });
                    }else { // 不一定新增/修改成功，我们也不知道新增/修改成功没有
                      this.$message({
                        message: result.data.message,
                        type: 'error'
                      });
                    }
                    // 3.改变当前页页码
                    this.currentPage = 1;
                    // 4.调用查询列表函数
                    this.getDetails();
                  })
                  .catch(result=>{
                    this.editLoading = false;
                    this.$message({
                      message: '系统繁忙，请重试！',
                      type: 'error'
                    });
							});
						});
					}
				});
			},


      selsChange: function (sels) {
        this.sels = sels;
      },




			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id);
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
          this.$http.patch("/dictionary", ids)
        .then(result=>{
            this.listLoading = false;

            if (result.data.success){
              // 删除成功
              // 1.给出成功提示
              this.$message({
                message: result.data.message,
                type: 'success'
              });
            }else {
              // 删除失败
              // 删除成功
              // 1.给出失败提示
              this.$message({
                message: result.data.message,
                type: 'error'
              });
              // 2.修改页码为第一页
            }
            this.currentPage = 1;
            // 3.调用函数刷新列表
            this.getdictionarys();
          })
              .catch(result=>{ // 接口调用失败
                // 1.关闭忙等框
                this.listLoading = false;
                // 2.给出自定义失败提示！
                this.$message({
                  message: '系统繁忙，请重试！',
                  type: 'error'
                });
              })
				}).catch(() => {

				});
			},

      batchRemove1: function () {
        var ids = this.sels.map(item => item.id);
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading1 = true;
          this.$http.patch("/detail", ids)
              .then(result=>{
                this.listLoading1 = false;

                if (result.data.success){
                  // 删除成功
                  // 1.给出成功提示
                  this.$message({
                    message: result.data.message,
                    type: 'success'
                  });
                }else {
                  // 删除失败
                  // 删除成功
                  // 1.给出失败提示
                  this.$message({
                    message: result.data.message,
                    type: 'error'
                  });
                  // 2.修改页码为第一页
                }
                this.currentPage = 1;
                // 3.调用函数刷新列表
                this.getDetails();
              })
              .catch(result=>{ // 接口调用失败
                // 1.关闭忙等框
                this.listLoading = false;
                // 2.给出自定义失败提示！
                this.$message({
                  message: '系统繁忙，请重试！',
                  type: 'error'
                });
              })
        }).catch(() => {

        });
      }


		},
		mounted() {
      // // 获取产品列表
      // this.getDetails();
      // // 获取部门列表数据
      // this.getDepartments();
      // // 获取员工列表数据
      // this.getdictionarys();
      //获取产品列表
      this.getdictionarys();
      //获取树
      // this.getDetailsTree()
		}
	}

</script>

<style scoped>

</style>